<template>
    <!-- 点击用户头像时触发显示页面，“我的钱包”菜单项显示内容 -->
    <div id="user-center-myWallet-contrainer">
        <el-row id="user-center-myWallet-contrainer-header">
            <span>
                我的钱包
            </span>
        </el-row>
        <el-divider/>
        <el-row id="remaining-sum">
            <div id="remaining-sum-title">
                当前可用余额<svg-icon icon-class="remaining"/>
            </div>
            <div id="remaining-sum-content">
                <span>￥0.0</span>
                <span>
                    <el-button type="danger">充值</el-button>
                    <el-button>提现</el-button>
                </span>
            </div>
        </el-row>
        <el-row id="wallet-records">
            <el-tabs>
                <el-tab-pane label="充值记录">充值记录</el-tab-pane>
                <el-tab-pane label="消费记录">消费记录</el-tab-pane>
                <el-tab-pane label="提现记录">提现记录</el-tab-pane>
            </el-tabs>
        </el-row>
    </div>
</template>
<script>
export default {
    name: 'MyWallet'    
}
</script>
<style>
    #wallet-records {
        margin-top: 3%;
    }
    #remaining-sum-content {
        margin-top: 3%;
    }
    #remaining-sum-content > span:first-child {
        font-size: 24px;
        color: rgb(255, 145, 0);
    }
    #remaining-sum-content > span:last-child {
        float: right;
    }
    #user-center-myWallet-contrainer-header > span {
        font-size: 22px;
    }
    #remaining-sum {
        padding: 2%;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }
</style>